<template>
  <el-card>
    <div class="box">
      <div class="head">
        <h1>体检信息录入</h1>
      </div>
      <div class="content1">
        <el-form
          :model="submitParams"
          ref="submitParams"
          :rules="rules"
          class="submitParams"
        >
          <el-row :gutter="24">
            <el-form-item label="姓名：" prop="name">
              <el-input
                type="text"
                v-model="submitParams.name"
                class="input"
              ></el-input>
            </el-form-item>
            <el-form-item label="身高：" prop="height">
              <el-input
                type="text"
                v-model="submitParams.height"
                class="input"
              ></el-input>
            </el-form-item>
            <el-form-item label="体重：" prop="weight">
              <el-input
                type="text"
                v-model="submitParams.weight"
                class="input"
              ></el-input>
            </el-form-item>
            <el-form-item label="健康档案号：" prop="healthrecord">
              <el-input
                type="text"
                v-model="submitParams.healthrecord"
                class="input"
              ></el-input>
            </el-form-item>
          </el-row>
          <el-row :gutter="24">
            <el-form-item label="性别：" prop="sex">
              <el-select v-model="submitParams.sex" class="select">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="BMI：" prop="bmi">
              <el-select v-model="submitParams.bmi" class="select">
                <el-option label="正常" value="0"></el-option>
                <el-option label="临界" value="1"></el-option>
                <el-option label="异常" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="肝功能：" prop="liver">
              <el-select v-model="submitParams.liver" class="select">
                <el-option label="正常" value="0"></el-option>
                <el-option label="临界" value="1"></el-option>
                <el-option label="异常" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="肾功能：" prop="kidney">
              <el-select v-model="submitParams.kidney" class="select">
                <el-option label="正常" value="0"></el-option>
                <el-option label="临界" value="1"></el-option>
                <el-option label="异常" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-row>
          <el-row :gutter="24">
            <el-form-item label="血压：" prop="bloodpressure">
              <el-select v-model="submitParams.bloodpressure" class="select">
                <el-option label="正常" value="0"></el-option>
                <el-option label="临界" value="1"></el-option>
                <el-option label="异常" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="血脂：" prop="bloodfat">
              <el-select v-model="submitParams.bloodfat" class="select">
                <el-option label="正常" value="0"></el-option>
                <el-option label="临界" value="1"></el-option>
                <el-option label="异常" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="血常规：" prop="bloodroutine">
              <el-select v-model="submitParams.bloodroutine" class="select">
                <el-option label="正常" value="0"></el-option>
                <el-option label="临界" value="1"></el-option>
                <el-option label="异常" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="尿常规：" prop="urinalysis">
              <el-select v-model="submitParams.urinalysis" class="select">
                <el-option label="正常" value="0"></el-option>
                <el-option label="临界" value="1"></el-option>
                <el-option label="异常" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-row>
          <el-row
            :gutter="24"
            style="display: flex; flex-direction: row-reverse"
          >
            <el-button
              style="width: 121px; margin-left: 20px; height: 40px"
              @click="resetForm()"
              >重置</el-button
            >

            <el-button
              type="primary"
              style="width: 199px; height: 40px"
              @click="
                addOrUpdate == false ? submitAndAdding() : submitAndUpdating()
              "
              >{{ addOrUpdate == false ? "录入" : "更新" }}</el-button
            >
          </el-row>
        </el-form>
        <hr />
      </div>
      <div class="head">
        <h1>体检信息更新</h1>
      </div>
      <div class="content">
        <el-table
          :data="
            resList.slice((currentPage - 1) * pageSize, currentPage * pageSize)
          "
          style="width: 100%; height: 300px"
        >
          <el-table-column prop="name" label="姓名" />
          <el-table-column prop="bmi" label="BMI">
            <template #default="scope">
              <el-tag
                :type="
                  scope.row.bmi === 0
                    ? 'primary'
                    : scope.row.bmi === 1
                    ? 'warning'
                    : 'danger'
                "
                >{{
                  scope.row.bmi === 0
                    ? "正常"
                    : scope.row.bmi === 1
                    ? "临界"
                    : "异常"
                }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="liver" label="肝功能">
            <template #default="scope">
              <el-tag
                :type="
                  scope.row.liver === 0
                    ? 'primary'
                    : scope.row.liver === 1
                    ? 'warning'
                    : 'danger'
                "
                >{{
                  scope.row.liver === 0
                    ? "正常"
                    : scope.row.liver === 1
                    ? "临界"
                    : "异常"
                }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="kidney" label="肾功能">
            <template #default="scope">
              <el-tag
                :type="
                  scope.row.kidney === 0
                    ? 'primary'
                    : scope.row.kidney === 1
                    ? 'warning'
                    : 'danger'
                "
                >{{
                  scope.row.kidney === 0
                    ? "正常"
                    : scope.row.kidney === 1
                    ? "临界"
                    : "异常"
                }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="bloodpressure" label="血压">
            <template #default="scope">
              <el-tag
                :type="
                  scope.row.bloodpressure === 0
                    ? 'primary'
                    : scope.row.bloodpressure === 1
                    ? 'warning'
                    : 'danger'
                "
                >{{
                  scope.row.bloodpressure === 0
                    ? "正常"
                    : scope.row.bloodpressure === 1
                    ? "临界"
                    : "异常"
                }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="bloodfat" label="血脂">
            <template #default="scope">
              <el-tag
                :type="
                  scope.row.bloodfat === 0
                    ? 'primary'
                    : scope.row.bloodfat === 1
                    ? 'warning'
                    : 'danger'
                "
                >{{
                  scope.row.bloodfat === 0
                    ? "正常"
                    : scope.row.bloodfat === 1
                    ? "临界"
                    : "异常"
                }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="bloodroutine" label="血常规">
            <template #default="scope">
              <el-tag
                :type="
                  scope.row.bloodroutine === 0
                    ? 'primary'
                    : scope.row.bloodroutine === 1
                    ? 'warning'
                    : 'danger'
                "
                >{{
                  scope.row.bloodroutine === 0
                    ? "正常"
                    : scope.row.bloodroutine === 1
                    ? "临界"
                    : "异常"
                }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="urinalysis" label="尿常规">
            <template #default="scope">
              <el-tag
                :type="
                  scope.row.urinalysis === 0
                    ? 'primary'
                    : scope.row.urinalysis === 1
                    ? 'warning'
                    : 'danger'
                "
                >{{
                  scope.row.urinalysis === 0
                    ? "正常"
                    : scope.row.urinalysis === 1
                    ? "临界"
                    : "异常"
                }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="ctime" label="体检时间" width="180" />
          <el-table-column align="right" width="180">
            <template #header>
              <div class="header">
                <el-input
                  v-model="search"
                  size="small"
                  placeholder="请输入姓名"
                />
              </div>
            </template>
            <template #default="scope">
              <el-button size="small" @click="handleEdit(scope.row)"
                >更新</el-button
              >
              <el-button
                size="small"
                type="danger"
                @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <el-pagination
            v-model:current-page="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            background
            :total="resList.length"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </el-card>
</template>
<script>
import { ref } from "vue";
import { pageMixin } from "@/utils/mixin/pageMixin";
import {
  getList,
  addOneResult,
  updateOneResult,
  delOneResult,
} from "@/api/bodycheck";
export default {
  mixins: [pageMixin],
  data() {
    return {
      addOrUpdate: false,
      search: ref(""),
      resList: [],
      submitParams: {},
      rules: {
        name: [{ required: true, message: "姓名不能为空", trigger: "change" }],
        height: [
          { required: true, message: "身高不能为空", trigger: "change" },
        ],
        weight: [
          { required: true, message: "体重不能为空", trigger: "change" },
        ],
        healthrecord: [
          { required: true, message: "健康档案号不能为空", trigger: "change" },
        ],
        sex: [{ required: true, message: "性别不能为空", trigger: "change" }],

        bmi: [{ required: true, message: "BMI不能为空", trigger: "change" }],
        liver: [
          { required: true, message: "肝功能不能为空", trigger: "change" },
        ],
        kidney: [
          { required: true, message: "肾功能不能为空", trigger: "change" },
        ],
        bloodpressure: [
          { required: true, message: "血压不能为空", trigger: "change" },
        ],
        bloodfat: [
          { required: true, message: "血脂不能为空", trigger: "change" },
        ],
        bloodroutine: [
          { required: true, message: "血常规不能为空", trigger: "change" },
        ],
        urinalysis: [
          { required: true, message: "尿常规不能为空", trigger: "change" },
        ],
      },
    };
  },
  created() {
    this.queryList();
  },
  computed: {
    resList() {
      return this.resList.filter((item) => {
        return item.name.includes(this.search);
      });
    },
  },
  methods: {
    queryList() {
      getList().then((res) => {
        this.resList = res.data.data;
      });
    },
    submitAndAdding() {
      this.$refs.submitParams.validate((valid) => {
        if (valid) {
          addOneResult(this.submitParams).then((res) => {
            this.queryList();
            this.$message({
              type: "success",
              message: "录入成功!",
            });
            this.resetForm();
          });
        }
      });
    },
    handleEdit(row) {
      this.addOrUpdate = true;
      this.submitParams = JSON.parse(JSON.stringify(row));
      this.submitParams.sex = this.submitParams.sex.toString();
      this.submitParams.bloodfat = this.submitParams.bloodfat.toString();
      this.submitParams.bloodpressure =
        this.submitParams.bloodpressure.toString();
      this.submitParams.bloodroutine =
        this.submitParams.bloodroutine.toString();
      this.submitParams.urinalysis = this.submitParams.urinalysis.toString();
      this.submitParams.liver = this.submitParams.liver.toString();
      this.submitParams.bmi = this.submitParams.bmi.toString();
      this.submitParams.kidney = this.submitParams.kidney.toString();
    },
    handleDelete(row) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delOneResult(row).then((res) => {
            this.queryList();
          });
        })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消删除",
          });
        });
    },
    resetForm() {
      this.$refs["submitParams"].resetFields();
    },
    submitAndUpdating() {
      this.$refs.submitParams.validate((valid) => {
        if (valid) {
          updateOneResult(this.submitParams).then((res) => {
            this.addOrUpdate = false;
            this.queryList();
            this.$message({
              type: "success",
              message: "更新成功!",
            });
            this.resetForm();
          });
        }
      });
    },
  },
};
</script>
<style scoped>
.head h1 {
  font-size: 22px;
  margin: 15px;
}
.content1 {
  width: 100%;
  height: auto;
  min-height: 260px;
  padding: 50px 50px 0 50px;
}
.content {
  width: 100%;
  height: auto;
  min-height: 360px;
  padding: 0 30px 0 30px;
}
::v-deep .submitParams .el-form-item__label {
  width: 175px;
}
.submitParams .input {
  width: 199px;
}
.page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 20px;
  align-items: end;
  width: 100%;
  height: 40px;
  background-color: white;
}
</style>
